<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>AI专家数据结构测试</span>
      </div>

      <el-button type="primary" @click="loadTestData">加载测试数据</el-button>

      <div v-if="expertData" style="margin-top: 20px;">
        <h3>专家数据：</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="ID">{{ expertData.id }}</el-descriptions-item>
          <el-descriptions-item label="专家ID">{{ expertData.expert_id }}</el-descriptions-item>
          <el-descriptions-item label="昵称">{{ expertData.nickname }}</el-descriptions-item>
          <el-descriptions-item label="头像">
            <el-avatar :size="40" :src="expertData.avatar" icon="el-icon-user-solid" />
          </el-descriptions-item>
        </el-descriptions>

        <h3 style="margin-top: 20px;">竞彩数据：</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>竞彩单关</span>
              </div>
              <el-tag v-if="expertData.jing_dan" type="primary" size="medium">{{ expertData.jing_dan }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>竞彩二串1</span>
              </div>
              <el-tag v-if="expertData.jing_shuang" type="success" size="medium">{{ expertData.jing_shuang }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>竞彩三串1</span>
              </div>
              <el-tag v-if="expertData.jing_san" type="warning" size="medium">{{ expertData.jing_san }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
        </el-row>

        <h3 style="margin-top: 20px;">大单数据：</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>大单</span>
              </div>
              <el-tag v-if="expertData.da_dan" type="info" size="medium">{{ expertData.da_dan }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>大双</span>
              </div>
              <el-tag v-if="expertData.da_shuang" type="info" size="medium">{{ expertData.da_shuang }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>大三</span>
              </div>
              <el-tag v-if="expertData.da_san" type="info" size="medium">{{ expertData.da_san }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
        </el-row>

        <h3 style="margin-top: 20px;">比单数据：</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>比单</span>
              </div>
              <el-tag v-if="expertData.bi_dan" type="danger" size="medium">{{ expertData.bi_dan }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>比双</span>
              </div>
              <el-tag v-if="expertData.bi_shuang" type="danger" size="medium">{{ expertData.bi_shuang }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span>比三</span>
              </div>
              <el-tag v-if="expertData.bi_san" type="danger" size="medium">{{ expertData.bi_san }}</el-tag>
              <span v-else style="color: #999;">暂无数据</span>
            </el-card>
          </el-col>
        </el-row>

        <h3 style="margin-top: 20px;">原始JSON数据：</h3>
        <el-input
          type="textarea"
          :rows="15"
          :value="JSON.stringify(expertData, null, 2)"
          readonly
          style="font-family: 'Courier New', monospace;"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DataTest',
  data() {
    return {
      expertData: null
    }
  },
  methods: {
    loadTestData() {
      // 模拟您提供的数据结构
      this.expertData = {
        'id': 1,
        'expert_id': 85,
        'nickname': '小朱玩球',
        'avatar': 'https://yqty-1325400698.cos.ap-guangzhou.myqcloud.com/yqty/20250825/6afd7cb03b0dc53fc39d28147641ebe2.png',
        'jing_dan': '',
        'jing_shuang': '',
        'jing_san': '',
        'da_dan': '',
        'da_shuang': '',
        'da_san': '',
        'bi_dan': '',
        'bi_shuang': '',
        'bi_san': ''
      }

      this.$notify({
        title: '成功',
        message: '测试数据加载完成',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>




